<template>
  <div class="tipCss" :class="color === 'blue' ? 'blueCss': color === 'red' ? 'redCss':'yellowCss'" :style="{ width, height }">
    <slot name="content"></slot>
  </div>
</template>

<script setup>
  defineProps({
    color: {
      type: String,
      default: 'blue'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  })
</script>

<style scoped>
  .tipCss {
    display: flex;
    align-items: center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 1rem 0;
    color: black;
  }

  .blueCss {
    border-left: 5px solid #409EFF;
    border-radius: 4px;
    background-color: #ECF5FF;
  }

  .redCss {
    border-left: 5px solid #F56C6C;
    border-radius: 4px;
    background-color: #FEF0F0;
  }

  .yellowCss {
    border-left: 5px solid #ecd81d;
    border-radius: 4px;
    background-color: #f3eccc;
  }
</style>
